/**
 * Created by James on 2016/12/19.
 */

$(document).ready(function () {

    /** 获取所有需要显示的盒子的ID名 **/
    var id_lists = [];      //存储所有ID名的变量
    var $content = $(".projects-item-content-box");
    $content.each(function () {
        var ele_id = $(this).attr('id');
        id_lists.push(ele_id);
    });

    /** 所有相关子系统的数据接口地址与跳转地址(按模型中从上到下, 从左到右的排序) **/
    var sys_datas = [
    /**  -----   Component DPPM   ----- **/
        {
            'name': 'Supplier Partner',
            'data': 'http://10.129.4.48:8000/dppm_view_1/',
            'url': 'http://10.129.4.48:8000/dppm_c2c_1'
        },
        {
            'name': 'Failure Information',
            'data': 'http://10.129.4.48:8000/dppm_view_2/',
            'url': 'http://10.129.4.48:8000/dppm_c2c_2'
        },
        {
            'name': 'DPPM Alert',
            'data': 'http://10.129.4.48:8000/dppm_view_3/',
            'url': 'http://10.129.4.48:8000/dppm_c2c_3'
        },

    /**  -----   SMT IOE   ----- **/
        {
            'name': 'Intelligent material',
            'data': "http://10.167.192.160:8088/VSOM.asmx/Intelligent_Material",
            'url': 'http://10.167.192.160:8080/SmtIoeAccount/Login_NoCheck?user=F1300108&password=foxconn168!!'
        },
        {
            'name': 'AOI parameter correction',
            'data': "http://10.132.41.154:11143/WNBU/E53SEB/C7433ABE",
            'url': 'http://10.167.192.160:8080/SmtIoeAccount/Login_NoCheck?user=F1300108&password=foxconn168!!'
        },
        {
            'name': 'Intelligent maintenance',
            'data': null,
            'url': 'http://10.167.192.160:8080/zh/SMTIOE/SmtIoeEquipmentInfo?factory=LH&build=D10&floor=2F&area=SMT&line=DA2S1A&machine=H2&active=Nozzle%E'
        },

    /**  -----   SMC   ----- **/
        {
            'name': 'Inbound Status',
            'data': "http://10.129.4.32:8090/SMCService.asmx/getInboundC2C?bu=savbu",
            'url': 'http://10.129.4.32:8090/SMCService.asmx?op=getInbound'
        },
        {
            'name': 'WO Status',
            'data': "http://10.129.4.32:8090/SMCService.asmx/workorderQtyDistributed?mfg=mfgvii&hh=20",
            'url': 'http://10.129.4.32:8090/SMCService.asmx?op=workorderQtyDistributed'
        },
        {
            'name': 'Producting Alert',
            'data': "http://10.129.4.32:8090/SMCService.asmx/abnormalHistogram?mfgName=mfgvii&workid=F1300108",
            'url': 'http://10.129.4.32:8090/SMCService.asmx?op=abnormalHistogram'
        },

    /**  -----   Transformers   ----- **/

        {
            'name': 'Utilization Trend',
            'data': "http://10.132.32.116/C2C/Utilization.aspx",
            'url': 'http://10.132.32.116/transformers-C2C/'
        },
        {
            'name': 'BigData Computing',
            'data': "http://10.132.32.116/C2C/ADT.aspx",
            'url': 'http://10.132.32.116/transformers-C2C/'
        },
        {
            'name': 'Robot Monitoring',
            'data': null,
            'url': 'http://10.167.194.188:8080/javascript.html'
        },

    /**  -----   ODIN   ----- **/
        {
            'name': 'Inventory Trun',
            'data': "http://10.129.4.146:8000/odin/inventory_turn_interface/",
            'url': 'http://10.129.4.146:8000/odin/inventory_turn_1/'
        },
        {
            'name': 'Inventory Target',
            'data': "http://10.129.4.146:8000/odin/inventory_target_interface/",
            'url': 'http://10.129.4.146:8000/odin/inventory_target_1/'
        },
        {
            'name': 'E&O Global',
            'data': null,
            //'data': "http://10.129.4.146:8000/odin/e_o_global_interface/",
            'url': 'http://10.129.4.146:8000/odin/e_o_global_1/'
        }
    ];

    /** ------------ 所有处理数据的Handler ----------------------- **/
    var handler = {
        aoiParameterCorrection: function (data) {
            var ret = data['input']['C457_2~W4'][56]['data'];
            var result = {};
            var t = {};
            for (var a = 0; a < ret.length; a++) {
                var r = ret[a];
                if (t[r] === undefined) {
                    t[r] = 1;
                }
                else {
                    t[r] += 1;
                }
            }
            var x_axis = get_keys(t).sort();
            var data = [];
            for (var b = 0; b < x_axis.length; b++) {
                var c = x_axis[b];
                data.push(t[c]);
            }
            result.data = data;
            result.x_axis = x_axis;
            return result;
        },
        inbound: function (data) {
            var result = {};
            result.series = [];
            var arr = data['Inbound'];
            var dataset = [];
            var x_axis_set = {};
            var y_axis_set = {};
            for (var i = 0; i < arr.length; i++) {
                var res = {};
                var row = arr[i];
                var t = "Y" + row['CiscoYear'] + "Q" + row["CiscoQuarter"] + "W" + row["CiscoWeek"];
                res["name"] = row["Inbound_performance"];
                res['data'] = row["Inbounddata"];
                res['date'] = t;
                if (x_axis_set != 1) {      //保证key为唯一值.
                    x_axis_set[t] = 1;
                }
                if (y_axis_set != 1) {      //保证key为唯一值.
                    y_axis_set[row["Inbound_performance"]] = 1;
                }
                dataset.push(res);
            }
            var x_axis = get_keys(x_axis_set).sort();
            var y_axis = get_keys(y_axis_set).sort();
            result.x_axis = x_axis;
            result.y_axis = y_axis;
            for (var a = 0; a < y_axis.length; a++) {
                var y = y_axis[a];  //po triggered
                var data_item = {};
                data_item['name'] = y;
                data_item['data'] = [];
                for (var b = 0; b < x_axis.length; b++) {
                    var x = x_axis[b];  // y2017-q2-w3
                    for (var c = 0; c < dataset.length; c++) {
                        var d = dataset[c];
                        if (d.date == x && d.name == y) {
                            data_item['data'].push(parseInt(d.data));
                        }
                    }
                }
                result.series.push(data_item);
            }
            return result;
        },
        woStatus: function (data) {
            var result = {};
            var ret = data['Table'];
            var x_axis = [];
            var _type = [];
            var t_data = {};
            for (var a = 0; a < ret.length; a++) {
                //var rectime = ret[a]['rectime'].substring(5).replace(" ", " ");
                var rectime = ret[a]['rectime'];
                var t_type = ret[a]['type'];
                var qty = parseInt(ret[a]['qty']);
                if (x_axis.indexOf(rectime) == -1) {
                    x_axis.push(rectime);
                }
                if (_type.indexOf(t_type) == -1) {
                    _type.push(t_type);
                    t_data[t_type] = [];
                    t_data[t_type].push(qty);
                }
                else {
                    t_data[t_type].push(qty);
                }
            }
            result.x_axis = x_axis;
            result.series = [];
            for (var b = 0; b < _type.length; b++) {
                var d = {};
                var name = _type[b];
                d.name = transformName(name);
                d.data = t_data[name];
                result.series.push(d)
            }
            return result;
        },
        productingAlert: function (data) {
            var ret = data['Tables'];
            var result = [];
            for (var a = 0; a < ret.length; a++) {
                var t_row = [];
                var r = ret[a];
                t_row.push(r['wentifenlei']);
                t_row.push(parseInt(r['counts']));
                result.push(t_row);
            }
            return result
        },
        utilizationTrend: function (ret) {
            var data = [
                {
                    'name': 'Cell',
                    'data': []
                },
                {
                    'name': 'Cell target',
                    'data': []
                },
                {
                    'name': 'Robot',
                    'data': []
                },
                {
                    'name': 'Robot target',
                    'data': []
                }
            ];
            var dataset = {};
            var x_axis = [];
            for (var a = 0; a < ret.length; a++) {
                var row = ret[a];
                var datecode = row['datecode'];

                x_axis.push(row['datecode']);
                data[0].data.push(row['series_data_equip']);
                data[1].data.push(row['target_data_equip']);
                data[2].data.push(row['series_data_robot']);
                data[3].data.push(row['target_data_robot']);

            }
            dataset.x_axis = x_axis;
            dataset.series = data;
            return dataset;
        },
        bigDataComputing: function (ret) {
            var result = {
                'x_axis': [],
                'pm2': {
                    'name': 'Time Saving(PM2)',
                    'data': [],
                    'type': 'spline',
                    'yAxis': 0,
                    'unit': '%'
                },
                'pm3': {
                    'name': 'Time Saving(PM3))',
                    'data': [],
                    'type': 'spline',
                    'yAxis': 0,
                    'unit': '%'
                },
                'costsave': {
                    'name': 'Cost Saving',
                    'data': [],
                    'type': 'column',
                    'yAxis': 1,
                    'unit': '%'
                }
            };
            var dataset = {};
            var costsaving = {};
            for (var a = 0; a < ret.length; a++) {
                var row = ret[a];
                var datecode = row['datecode'];
                var area = row['area'];
                var costsave = row['costsave'];
                var saverate = row['saverate'];
                if (result.x_axis.indexOf(datecode) == -1) {
                    result.x_axis.push(datecode);
                    costsaving[datecode] = 0;
                }
                costsaving[datecode] += costsave;
                if (dataset[area] === undefined) {
                    dataset[area] = [];
                    dataset[area].push(saverate);
                }
                else {
                    dataset[area].push(saverate);
                }
            }
            var t = [];
            for (var d = 0; d < result.x_axis.length; d++) {
                var k = result.x_axis[d];
                var v = costsaving[k];
                t.push(v);
            }
            result.pm2.data = dataset['PCBPM2'];
            result.pm3.data = dataset['PCBPM3'];
            result.costsave.data = t;
            return result;
        }
    };

    function transformName(name) {
        switch (name) {
            case 'RMA':
                return 'RMA工單數量';
            case 'REGULAR':
                return '正常工單數量';
            case 'REWORK':
                return '重工工單數量';
            case 'ONLINE_TOTAL':
                return '已上線總工單數量';
            case 'DELAY7':
                return '超七天未關結工單';
        }
    }

    /**  -----   start 生成highchart图表   ----- **/
    ChartStyle();
    var process = {
        supplierPartnerProcess: function ($ele, data_url) {
            setTimeout(function () {
                $.ajax({
                    ele: $ele,
                    url: data_url,
                    success: function (ret) {
                        JqueryTable($ele, {
                            dataset: ret,
                            columns: ["commodity code", 'supplier name'],
                            //columns: ["commodity category", "contacts", "escalation path", "supplier name"],
                            //title : ['a', 'b', 'c', 'd'],
                            limit: 60,
                            td_cls: 'jt_td'
                        });
                    },
                    error: function () {

                    }
                });
            }, 200);
        },
        failureInformationProcess: function ($ele, data_url) {
            setTimeout(function () {
                $.ajax({
                    ele: $ele,
                    url: data_url,
                    success: function (ret) {
                        JqueryTable($ele, {
                            dataset: ret,
                            //columns: ["bu", "date_code", 'manufacturer', "mpn", "p_sn", "product name"],
                            columns: ["cpn", 'manufacturer'],
                            //columns: ["bu","p_sn", "product name"],
                            limit: 60,
                            td_cls: 'jt_td'
                        });
                    },
                    error: function () {

                    }
                });
            }, 300);
        },
        dPPMAlertProcess: function ($ele, data_url) {
            setTimeout(function () {
                $.ajax({
                    ele: $ele,
                    url: data_url,
                    success: function (ret) {
                        JqueryTable($ele, {
                            dataset: ret,
                            //columns: ["bu", "name", "mpn", "product_no", "lot_code"],
                            columns: ["cpn",  "dppm"],
                            limit: 60,
                        });
                    },
                });
            }, 400);
        },

        intelligentMaterialProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    JqueryTable($('#' + id_lists[3]), {
                        dataset: ret,
                        //columns: ["KP_NO", "EXT_QTY", "Identify", "TR_SN", 'SLOT_NO'],
                        columns: ["KP_NO", "EXT_QTY"],
                        //columns: ["bu","p_sn", "product name"],
                        limit: 60,
                        td_cls: 'jt_td'
                    });
                },
            });
        },
        aOIParameterCorrectionProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    var dataset = handler.aoiParameterCorrection(ret);
                    $('#' + id_lists[4]).highcharts({
                        chart: {
                            type: 'column'
                        },
                        columns: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: dataset.x_axis,
                            crosshair: true
                        },
                        yAxis: {
                            allowDecimals: false,   // 刻度不出现小数
                            min: 0,
                            tickPixelInterval: 30,
                            alignTicks: false,      //对齐刻度
                            title: {
                                text: ''
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' +
                            '<td style="padding:0"><b>{point.y} Qty</b></td></tr>',
                            //'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                            name: '',
                            data: dataset.data,
                        }]
                    });
                },
            });
        },
        intelligentMaintenanceProcess: function () {
        },

        inboundStatusProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    var dataset = handler.inbound(ret);
                    $('#' + id_lists[6]).highcharts({
                        chart: {
                            type: 'column'
                        },
                        columns: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: dataset.x_axis,
                            title: {
                                text: null
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '',
                                align: 'high'
                            },
                            labels: {
                                overflow: 'justify'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y}</b></td></tr>',
                            //'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            bar: {
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        },
                        series: dataset.series
                    });
                },
            });
        },
        woStatusProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    var dataset = handler.woStatus(ret);
                    $('#' + id_lists[7]).highcharts({
                        chart: {
                            type: 'column'
                        },
                        columns: {
                            text: '',
                            x: -20 //center
                        },
                        subtitle: {
                            text: '',
                            x: -20
                        },
                        xAxis: {
                            categories: dataset.x_axis,
                        },
                        yAxis: {
                            title: {
                                text: ""
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y} Qty</b></td></tr>',
                            //'<td style="padding:0"><b>{point.y:.1f} Qty</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        series: dataset.series,
                    });
                },
            });
        },
        productionAlertProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    var data = handler.productingAlert(ret);
                    $('#' + id_lists[8]).highcharts({
                        chart: {
                            marginTop: -5,
                            marginBottom: -5,
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        },
                        columns: {
                            text: ''
                        },
                        tooltip: {
                            percentageDecimals: 1, //百分比保留小数
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                //'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
                            '<td style="padding:0"><b>{point.y} ({point.percentage:.1f}%)</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        legend: {
                            enabled: false
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: false,         /* 是否显示xAxis */
                                    format: '<b>{point.name}</b>',
                                    //format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                },
                                showInLegend: true
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: 'All Alerts',
                            data: data,
                        }]
                    });
                },
            });
        },

        utilizationTrendProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    var dataset = handler.utilizationTrend(ret);
                    $ele.highcharts({
                        columns: {
                            text: '',
                            x: -20 //center
                        },
                        subtitle: {
                            text: '',
                            x: -20
                        },
                        xAxis: {
                            categories: dataset.x_axis
                        },
                        yAxis: {
                            min: 0,
                            max: 100,
                            title: {
                                text: "%"
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        legend: {
                            layout: 'horizontal',        //水平/垂直布局, 默认为水平: horizontal, vertical
                            verticalAlign: 'top',       //legend放置的位置: left, right, top, bottom
                            align: 'center',              //legend对齐方式, 四种: left, right, center,
                            x: 35,
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.2f} %</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        series: dataset.series
                    });
                }
            });
        },
        bigDataComputingProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    var dataset = handler.bigDataComputing(ret);
                    $ele.highcharts({
                        chart: {
                        },
                        columns: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: dataset.x_axis,
                            crosshair: true
                        },
                        yAxis: [
                            {
                                min: 0,
                                max: 15,
                                //tickPixelInterval: 30,
                                alignTicks: true,      //对齐刻度
                                title: {
                                    text: 'Time Saving(%)'
                                }
                            },
                            {
                                min: 0,
                                lineWidth: 1,
                                opposite: true,
                                //tickPixelInterval: 30,
                                alignTicks: true,      //对齐刻度
                                title: {
                                    text: 'Cost Saving($)'
                                }
                            },
                        ],
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: (function () {
                                return '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.2f} {point}</b></td></tr>';
                            })(),
                            footerFormat: '</table>',
                            formatter: function () {
                                var s = '<b>' + this.x + '</b>';
                                var u = '%';
                                $.each(this.points, function () {
                                    if(this.series.name == 'Cost Saving'){
                                        u = '$';
                                    }
                                    s += '<br/>' + '<span style="color:'+this.series.color+'">'+ this.series.name + ': '+'</span>' +
                                        this.y.toFixed(2) + ' '+ u;
                                });
                                return s;
                            },
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [dataset.pm2, dataset.pm3, dataset.costsave]
                    });
                }
            });

        },
        robotMonitoringProcess: function ($ele, data_url) {
        },

        inventoryTrunProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    $ele.highcharts({
                        chart: {
                            type: 'gauge',
                            plotBorderWidth: 0,
                            plotBackgroundImage: null,
                            //spacingTop: -20,     // 调整top的留白
                            //spacingLeft: -20,    // 调整left的留白
                        },
                        columns: {
                            text: ' '
                        },
                        pane: [{
                            startAngle: -80,    //设置弧度
                            endAngle: 80,
                            background: null,   //不设置背景色
                            //设置gauge在div中的位置（左右与上下）
                            //center: ['46%', '90%'],
                            //设置整张图的缩放比例
                            //size: 270
                        }],
                        yAxis: [{
                            //设置刻度的范围
                            min: 0,
                            max: 30,
                            minorTickPosition: 'outside',
                            tickPosition: 'outside',
                            tickPixelInterval: 40,
                            alignTicks: false,   //对齐刻度
                            labels: {
                                rotation: 'auto',
                                //设置数字与刻度的距离
                                distance: 20,
                                style: {
                                    color: '#fff',
                                    fontSize: '15px',
                                    fontWeight: 'bold',
                                }
                            },
                            legend: {
                                enabled: true,
                            },
                            plotBands: [{
                                //设置刻度的颜色
                                from: 0,
                                to: 11.57,
                                color: '#3bc8ee',
                                //设置刻度的宽度
                                innerRadius: '100%',
                                outerRadius: '120%'
                            }, {
                                from: 11.57,
                                to: 30,
                                color: '#2b7ad9',
                                innerRadius: '100%',
                                outerRadius: '120%'
                            }],
                            pane: 0,
                            columns: {
                                //text: '<span style="font-size:16px;color:#fff"> Actual:10.33 </span> <br/><span style="font-size:16px;color:#fff"> Target:11.57 </span>',
                            }
                        }],
                        plotOptions: {
                            gauge: {
                                dataLabels: {
                                    enabled: true,      //指针指的刻度的值
                                    format: '<b>{point.name}</b>',
                                    borderWidth: 0,
                                    useHTML: true
                                },
                                //指针的长度
                                dial: {
                                    radius: '95%'
                                }
                            }
                        },
                        //指针的位置
                        series: [{
                            name: "Actual",
                            data: [{y: parseFloat(ret['Actual'])}],
                            yAxis: 0,
                            dial: {
                                backgroundColor: '#000'
                            },
                            dataLabels: {
                                format: '<div style="text-align:center;"><span style="font-size:10px;color:' +
                                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{series.name}: {y}</span><br/>' +
                                '<span style="font-size:10px;color:#1c9798;">Target: ' + parseFloat(ret['Target']) + '</span></div>',
                                y: 60,
                            },
                        }]
                    });
                },
            });
        },
        inventoryTargetProcess: function ($ele, data_url) {
            $.ajax({
                ele: $ele,
                url: data_url,
                success: function (ret) {
                    var keys = get_keys(ret);
                    var sub_keys = get_keys(ret[keys[0]]);
                    var source_data = [];

                    for (var i = 0; i < sub_keys.length; i++) {
                        var temp = {};
                        var t = [];
                        for (var j = 0; j < keys.length; j++) {
                            var d = ret[keys[j]][sub_keys[i]];
                            t.push(d)
                        }
                        temp['name'] = sub_keys[i];
                        temp['data'] = t;
                        temp['color'] = Highcharts.theme.colors[i];
                        source_data.push(temp);
                    }
                    $ele.highcharts({
                        chart: {
                            type: 'bar'
                        },
                        columns: {
                            text: ''
                        },
                        xAxis: {
                            categories: keys,
                            labels: {
                                enabled: true,
                                style: {
                                    fontSize: '10px',
                                    color: '#E0E0E3'
                                }
                            },
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: ''
                            },
                            labels: {
                                enabled: false,
                                style: {
                                    fontSize: '10px',
                                    color: '#fff'
                                }
                            },
                        },
                        legend: {
                            reversed: true
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>$ {point.y}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            series: {
                                stacking: 'normal'
                            }
                        },
                        series: source_data
                    });
                },
            });
        },
        eoGlobalProcess: function ($ele, data_url) {
        },
    };

    /** -------Component DPPM---------- **/
    process.supplierPartnerProcess($('#' + id_lists[0]), sys_datas[0].data);
    process.failureInformationProcess($('#' + id_lists[1]), sys_datas[1].data);
    process.dPPMAlertProcess($('#' + id_lists[2]), sys_datas[2].data);

    /** -------SMT IOE---------- **/
    process.intelligentMaterialProcess($('#' + id_lists[3]), sys_datas[3].data);
    process.aOIParameterCorrectionProcess($('#' + id_lists[4]), sys_datas[4].data);
    process.intelligentMaintenanceProcess();

    /** -------SMC---------- **/
    process.inboundStatusProcess($('#' + id_lists[6]), sys_datas[6].data);
    process.woStatusProcess($('#' + id_lists[7]), sys_datas[7].data);
    process.productionAlertProcess($('#' + id_lists[8]), sys_datas[8].data);

    /** -------Transformers---------- **/
    process.utilizationTrendProcess($('#' + id_lists[9]), sys_datas[9].data);
    process.bigDataComputingProcess($('#' + id_lists[10]), sys_datas[10].data);


    /** -------ODIN---------- **/
    process.inventoryTrunProcess($('#' + id_lists[12]), sys_datas[12].data);
    process.inventoryTargetProcess($('#' + id_lists[13]), sys_datas[13].data);


});